<template>
  <a-drawer
    v-model:visible="visible"
    class="custom-class"
    style="color: red"
    placement="right"
    width="600px"
    :closable="false"
  >
    <template #title>
      <div class="custom-title">
        <div style="display: flex; justify-content: space-between;">
          <div>挂载内容-位置</div>

          <div>
            <close-outlined @click="onClose" />
          </div>
        </div>
      </div>
    </template>
    <!-- 位置列表 -->
    <div class="poiList">
      <div class="top_btn">
        <a-button style="border-radius: 5px" @click="addPOI">添加POI</a-button>
      </div>

      <div class="content">
        <a-transfer
          v-model:target-keys="targetKeys"
          :data-source="poiList"
          show-search
          :list-style="{
            width: '250px',
            height: '700px',
          }"
          :titles="['未选', '已选']"
          :operations="['添加', '删除']"
          :render="(item) => `${item.store_name}`"
          @change="handleChange"
        >
          <template #footer="{ direction }">
            <a-button
              v-if="direction === 'left'"
              size="small"
              style="float: left; margin: 5px"
              @click="getPoiList"
            >
              刷新
            </a-button>
            <!-- <a-button
              v-else-if="direction === 'right'"
              size="small"
              style="float: right; margin: 5px"
              @click="getPoiList"
            >
              刷新
            </a-button> -->
          </template>
          <template #notFoundContent>
            <span>暂无数据</span>
          </template>
        </a-transfer>
      </div>
      <!-- 添加位置 -->
      <!-- <div class="poi_add" @click="addPoiHandle">
        <plus-outlined style="font-size: 16px" />
      </div>
      <div class="poi_item" v-for="store in poi_list">
        <a-popover>
          <template #content>
            <span>
              {{ store?.store_name }}
            </span>
          </template>
          <span class="text">
            {{ store?.store_name }}
          </span>
        </a-popover>
        <a-popover>
          <template #content>
            <span>
              {{ store?.store_address }}
            </span>
          </template>
          <span v-if="store?.full_address" class="full_address text">{{
            store?.full_address
          }}</span>
        </a-popover>

        <delete-outlined class="del_btn" @click="deleteHandle(store)" />
      </div> -->
    </div>
    <template #footer>
      <div style="text-align: right">
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" :disabled="poi_list.length==0" @click="submitHandle">确定</a-button>
      </div>
    </template>

    <!-- 添加POI -->
    <AddPOI
      :visible="visiblePOI"
      @onCancel="visiblePOI = false"
      @onSubmit="successPOI"
    />
  </a-drawer>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  watch,
  createVNode,
  onMounted,
} from "vue";
import request from "../../../../common/utils/request";
import {
  PlusOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
  EllipsisOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";
import AddPOI from "@/views/shotstack/MaterialCenter/modules/AddPOI.vue";
import { message, Modal, Transfer } from "ant-design-vue";
import "ant-design-vue/lib/transfer/style/css"; // 引入样式
import store from "../../../../store";
export default defineComponent({
  props: {
    poiList: {
      type: Array,
      default: [],
    },
  },
  components: {
    PlusOutlined,
    DeleteOutlined,
    ExclamationCircleOutlined,
    EllipsisOutlined,
    AddPOI,
    ATransfer: Transfer,
    CloseOutlined,
  },
  setup(props, context) {
    const state = reactive({
      visible: false,
      poi_list: [],
      visiblePOI: false,
      targetKeys: [],
      mockData: [],
      poiList: [],
      merchant_library_id: 0,
    });
    watch(
      () => props.poiList,
      (val) => {
        if (val.length > 0) {
          state.poi_list = JSON.parse(JSON.stringify(val));
        }
      },
      {
        immediate: true,
        deep: true,
      }
    );

    // 添加
    const addPoiHandle = () => {
      context.emit("addPoiList");
    };
    const deleteHandle = (info) => {
      Modal.confirm({
        title: "删除挂载位置",
        icon: createVNode(ExclamationCircleOutlined),
        content: "确定删除该挂载位置吗？",
        cancelText: "取消",
        okText: "确定",
        onOk() {
          const index = state.poi_list.findIndex((ele) => ele.id === info.id);
          if (index != -1) {
            state.poi_list.splice(index, 1);
          }
          context.emit("success", state.poi_list);
          message.success("删除成功");
        },
        onCancel() {},
      });
    };
    // 提交
    const submitHandle = () => {

      

      context.emit("success", state.poi_list);
      state.targetKeys = [];
      state.poiList = [];
      state.poi_list = [];
      state.visible = false;
    };

    const addPOI = () => {
      state.visiblePOI = true;
    };

    const successPOI = (data) => {
      state.visiblePOI = false;
      // state.checked = false;
      // state.indeterminate = true;
      getPoiList();
    };

    const handleChange = (keys, direction, moveKeys) => {
      keys.forEach((key) => {
    const item = state.poiList.find((item) => item.key === key);
    if (item && !state.poi_list.find(existingItem => existingItem.key === item.key)) {
      state.poi_list.push({ ...item });
    }
  });
};

    // 关闭弹窗
    const onClose = () => {
      state.targetKeys = [];
      state.poiList = [];
      state.poi_list = [];
      state.visible = false;
    };

    const getPoiList = () => {
      request
        .get("/work_ai", "/user/shotstack/poi/list", {
          merchant_library_id: state.merchant_library_id,
        })
        .then((res) => {
          state.poiList = res.result.map((item, index) => ({
            ...item,
            chosen: false,
            key: index,
          }));

          if (state.poi_list.length > 0) {
            state.poi_list.forEach((key) => {
              const item = state.poiList.find((item) => item.id === key.id);
              if (item) {
                state.targetKeys.push(item.key);
              }
            });
          }
        });
    };

    // 打开弹窗
    const showDrawer = () => {
      state.visible = true;
      getPoiList();
    };

    // 添加标题
    return {
      ...toRefs(state),
      showDrawer,
      onClose,
      submitHandle,
      addPoiHandle,
      deleteHandle,
      AddPOI,
      addPOI,
      successPOI,
      handleChange,
      getPoiList,
    };
  },
});
</script>

<style lang="less" scoped>
.poiList {
  // display: flex;
  width: 100%;
  // gap: 10px;
  // flex-wrap: wrap;
  color: black;
  .poi_add,
  .poi_item {
    width: calc(30%); /* 子元素宽度设置为25%（减去gap的一半） */
    height: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    cursor: pointer;
    background-color: #f2f2f2;
    border: 1px solid #e0e0e6;
    border-radius: 5px;
  }
  .poi_add {
    align-items: center;
    justify-content: center;
  }
  .poi_item {
    justify-content: center;
    position: relative;
    padding: 5px 5px 5px 10px;
    flex-direction: column;
    gap: 10px;

    .text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      width: auto;
    }
    // 小红书
    .full_address {
      color: #666;
      font-size: 13px;
    }
    .store_address {
      font-size: 14px;
    }
    .del_btn {
      position: absolute;
      font-size: 14px;
      top: 2px;
      right: 2px;
      &:hover {
        color: var(--ss-primary-color);
      }
    }
  }
}
// .active {
//   border: 1px solid #2878ff !important;
// }

.top_btn {
  display: flex;
  justify-content: flex-end;
}

.content {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
